<template>
  <!-- 蔗糖减水全光谱 -->
  <div class="space text-center">
    <template v-for="(chart,index) in allStepOneCharts">
      <wave-chart 
        :key="index" 
        :id="id+index"
        :data='chart'
        @shotImg="shotImg">
      </wave-chart>
    </template>
  </div>
  <!-- 使用方法
  <Saccharose 
    :originalData="originalData" 
    :title="$t('page.fullSpect')"
    @showImg="shotImg"
    :resultValue="resultValue">
  </Saccharose> -->
</template>

<script>
import waveChart from '@/components/WaveChart'
import { COLORLIST } from '@/utils/variate'
export default {
  name: 'saccharose',
  components: {
    waveChart
  },
  props: {
    // 后端返回的计算数组
    originalData: {
      type: Array,
      default: () => []
    },
    // 返回的类型
    dissType: {
      type: String,
      default: 'v2'
    },
    // 后端返回提交的数据用于前端使用
    resultValue: {
      type: Object,
      default: () => {}
    },
    // echarts的标题
    title: {
      type: String,
      default: ''
    },
    // DOM-Id
    id: {
      type: String,
      default: '',
      required: true
    },
    sprone_dissociation: {
      type: Array,
      default: () => [0, 0]
    }
    // 浓度列表
    // waveName: {
    //   type: Array,
    //   default: () => []
    // },
    // 后端返回用于计算中心线
    // dissociation: {
    //   type: Array,
    //   default: () => []
    // },
  },
  watch: {
    originalData: {
      handler(value) {
        this.$nextTick(() => {
          this.allStepOneCharts = []
          for (const k in value[0]) {
            if (k !== 'time') {
              this.waveName.push(k)
            }
          }
          this.newDrawChart()
        })
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      allStepOneCharts: [], // 线形图数据列表
      tooltipList: [], // 线形图tooltip需要的数据
      waveName: []
    }
  },
  methods: {
    newDrawChart() {
      /* 详情页展示 */
      this.originalData.forEach(item => {
        let chartsOption = {
          // 设置title
          title: {
            text: '',
          },
          // 是否使用动画
          animation: false,
          // 提示弹窗
          tooltip: {
            trigger: 'axis',
            // 自定义tootip 
            formatter: (params) => {
              let str = `<span>${ params[0].axisValueLabel }</span><br />`
              params.forEach((item, index) => {
                str += `<div 
                  style="width:100%;
                  padding:0 10px;
                  text-align: left;
                  ">
                    <span 
                      style="display:inline-block;
                      margin-right:5px;
                      border-radius:50%;
                      width:10px;
                      height:10px;
                      margin-left:5px;
                      background-color: ${COLORLIST[item.seriesIndex]}">
                    </span>
                    <span>${this.tooltipList[item.seriesIndex] || ''}：${item.value}
                </div>`

              })
              return str
            }
          },
          color: COLORLIST,
          /*  数据数组, 如果 data 没有被指定，会自动从当前系列中获取。
              多数系列会取自 series.name 或者 series.encode */ 
          legend: {
            type: 'scroll',
            orient: 'vertical',
            align: 'left',
            right: '20',
            top: '60',
            data: [],
            icon: 'circle',
            width: "80%",
            textStyle: {
              fontSize: 20
            },
            formatter: (name) => {
              const result = this.getLegendValue(name)
              return result
            }
          },
          // echarts 显示位置
          grid: {
            left: '3%',
            right: '13%',
            bottom: '15%',
            containLabel: true, // 是否展示轴刻度
          },
          // 滑动条型数据区域缩放组件
          dataZoom: [
            {
              type: 'inside',  // 类型，
              xAxisIndex: 0,   // 控制哪个轴
              height: 15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              filterMode: 'none',  // 数据过滤模式，放大缩小
            }, 
            {
              type: 'inside',
              yAxisIndex: 0,
              width:  15,
              handleSize: '140%',
              handleStyle: {
                color: '#999',
              },
              filterMode: 'none',
            },
          ],
          // 是否可以下载图片
          toolbox: {
            feature: {
              saveAsImage: {},
            },
          },
          // x轴配置
          xAxis: [
            {
              type: 'category',  // 类目轴
              axisTick: {
                show: true,
                alignWithLabel: true,  // 保证刻度线和标签对齐 需要设置
              },
              boundaryGap: true, // 是否显示刻度
              // minInterval: 120,   // 自动计算的坐标轴最小间隔大小
              data: [],   // x轴数据
            },
            {
              axisLine: {
                onZero: false
              },
              boundaryGap: true,
              position: 'bottom',
              type: 'category',
              axisTick: {
                alignWithLabel: true,
                length: 3,
                interval: 'auto',
              },
              data: []
            },
          ],
          // y轴 类型数值轴
          yAxis: {
            type: 'value',   
            splitNumber: 8,
          },
          series: [],  // 数据
          markLine: {},  
        }
        chartsOption.series = []
        chartsOption.xAxis.data = []
        let num = 0
        if (this.dissType === 'v2') {
          for (let i in item) {
            if (i !== 'time') {
              let chartSeries = {
                name: this.waveName[num],  // tootip 提示展示
                type: 'line',   // 线型
               // smooth: true,  // 平滑曲线显示
                showSymbol: false,  // hover是否展示symbol
                hoverAnimation: true, // 是否开启 hover 在 box 上的动画效果。
                data: item[i],   // 每个数组对应一天线型，跟xAxis对应
                // 每根线的颜色
                lineStyle: {
                  normal: {
                    width: 2.2,
                    color: COLORLIST[num],
                  }
                },
                markLine: {
                  symbol: 'none',  // 标线两端的标记类型
                  lineStyle: {     // 标线的样式
                    width: 2.2, 
                    normal: {
                      color: '#000',
                    },
                  },
                  data: [
                    {
                      xAxis: this.sprone_dissociation[0] >= 0 ? this.sprone_dissociation[0] : '',
                    },
                    {
                      xAxis: this.sprone_dissociation[1] ? this.sprone_dissociation[1] : '',
                    }
                  ],
                  // label: {
                  //   normal: {
                  //     formatter: this.dissociation[0],
                  //   },
                  // },
                },
              }

              // echarts 标题
              chartsOption.title.text = this.title

              // 顶部展示legend
              chartsOption.legend.data = this.waveName
              // 展示数据
              chartsOption.series.push(chartSeries)
              num++
            } else {
              // i === time 将数据设置为 x轴数据
              // const arr = item[i].filter(v => {
              //   return v % 5 == 0
              // })
              chartsOption.xAxis[0].data = item[i]
              chartsOption.xAxis[1].data = Array.from({ length: item[i].length }, (_, i) => "")
              // chartsOption.xAxis.data = item[i]
            }
          }
        } else {
          console.log('先不进行处理');
          // for (let i in item) {
          //   if (i !== 'time') {
          //     let chartSeries = {
          //       name: `${this.beforeLable[num] + this.unit}`,
          //       type: 'line',
          //       smooth: true,
          //       showSymbol: false,
          //       hoverAnimation: false,
          //       data: item[i],
          //     }
          //     chartsOption.title.text =
          //       this.$t('page.ODvalue') + this.$t('page.curve')
          //     chartsOption.legend.data.push(
          //       `${this.beforeLable[num] + this.unit}`
          //     )
          //     chartsOption.series.push(chartSeries)
          //     num++
          //   } else {
          //     chartsOption.xAxis.data = item[i]
          //   }
          // }
        }
        this.allStepOneCharts.push(chartsOption)
      })
    },
    // legend返回title部分
    getLegendValue(val) {
      const { key = [], data1 = []} = this.resultValue
      const index = key.findIndex(item => item === val)
      let str = ''
      const result1 = data1.some(item => item)
      if(result1) {
        str = data1[index]
        this.tooltipList = data1
      } else {
        str = val
        this.tooltipList = this.waveName
      }
      return str
    },

    // 返回生成图片base64
    shotImg(url) {
      this.$emit('showImg', url)
    }
  }
}
</script>

<style>

</style>